<template>
  <div >
    <div class="top_nav">
      <img @click="returnTap"
        class="return_icon"
        src="../../../../static/images/me/leftreturn.png"
        alt=""
      />
      <span class="nav_title">我的生活</span>
      <img src="../../../../static/images/me/seeicon.png" alt="" class="see_icon" @click="show =true">
    </div>
    <div class="top_pulish">
        <img src="../../../assets/images/bianji.png"  @click="showpublish" alt="" class="camere_icon" >
    </div>
    <div class="list" v-for="(item,index) in list" :key="index" @click="skiptodes">
     <div class="list_time">
         <span class="time_mony">1</span>
         <span class="time_tipe">12月</span>
    </div>
     <img src="../../../../static/images/me/headimg.png" alt="" class="main_img">
     <div  class="main_rigth">
         <div class="main_text">今天要派人去西区市场调查</div>
         <div class="main_bnt">
             <span class="main_bnt_nun">共2张</span>
             <img src="../../../../static/images/me/moret.png" alt="" class="moret_icon">
         </div>
     </div>
    </div>
   <bottomList v-if="isshowbolist" @closemodal="closemodal" @skiptopublish="skiptomsglist" :childlish="childlish"></bottomList>
  <van-popup v-model="show" position="bottom">
   <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择发布时间"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm='confirm'
        @cancel="cancel"
        />
    </van-popup>
  </div>
</template>
<script>
import bottomList from "@/components/bottomList.vue"
export default{
  components:{
    bottomList
  },
    data(){
        return{
            picList:6,
            isshowbolist:false,
            list:3,
            childlish:[{text:'消息列表',colorred:false,},{text:'筛选往日列表',colorred:false}],
            minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      show:false
        }
    },
    methods:{
         returnTap(){
  this.$router.go(-1);
        },
          showpublish(){
               this.$router.push('/renwugonggaoadd');
        },
        showbolist(){

            this.isshowbolist = !this.isshowbolist
        },
        closemodal(){
            this.showbolist()
            console.log('我出发了')
        },
        skiptomsglist(index){
            
            if(index==1){
                this.show = true 
                this.showbolist()

                return false
            }
        this.$router.push({
              path:"/msglist"
          })

        },
        skiptodes(){
        this.$router.push({
              path:"/details"
          })
        },
        formatter(type, val) {
           
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            }
            return val;
            },
            confirm(){
                this.show = false
            },
            cancel(){
                this.show = false 
            }
    }
}
</script>
<style  scoped>
.wrapper {
    /* display: flex;
    align-items: center;
    justify-content: center; */
    height: 100%;
  }
.top_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 25px;
  background: #eee;
}
.return_icon {
  width: 15px;
  height: 15px;
  /* transform: rotate(180deg); */
}
.btn {
  width: 25px;
  height: 25px;
}
.top_pulish{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    height: 150px;
    /* margin-bottom: 50px; */
    border-bottom: 30px solid #eee;
}
.camere_icon{
    width: 70px;
    height: 70px;
}
.headimg{
   position: absolute;
   right: 20px;
   bottom: -20px;
   height: 60px;
   width: 60px;
}
.name{
   position: absolute;
   right: 110px;
   bottom: 1px;
   color: #fff;
}

.sign{

text-align: right;
padding: 5px 20px;
color: #6E6E6E;
font-size: 12px;

}
.see_icon{
    width: 20px;
    height: 20px;
}
.list{
    display: flex;
    margin: 20px 20px;
}
.main_img{
    height: 60px;
    width: 60px;
    /* margin-left: 20px; */
    margin-right: 20px;
}
.main_rigth{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 60%;
}
.main_text{
    width:100%;
    overflow : hidden;  
        text-overflow: ellipsis;  
        display: -webkit-box;  
        -webkit-line-clamp: 2;  
        -webkit-box-orient: vertical;
}
.moret_icon{
    width: 15px;
    height: 15px;
}
.main_bnt{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main_bnt_nun{
    font-size: 12px;
    color: #767676;
}
.list_time{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 50px;
    height: 30px;
}
.time_mony{
    font-weight: 600;
    font-size: 20px;
    margin-right: 5px;
}
.time_tipe{
    font-size: 12px;

}
</style>